<template>
	<!-- 平台通知 -->
	<view class="notice">
		<view v-for="(item,index) in news" :key="index" class="notice_list" @click="handlelist(item)">
			<view class="title flex-cb">
				<text class="xt">{{item.title}}</text>
				<text class="time">{{item.created_at}}</text>
			</view>
			<view class="img">
				<image :src="item.cover" mode=""></image>
			</view>
			<view class="text" v-html="item.content"></view>
			<view class="solid"></view>
			<view class="foot flex-cb">
				<text>查看详情</text>
				<text class="cuIcon-right"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				news:[],
				page:1,
				limit:10
			};
		},
		methods:{
			handlelist(item){
				uni.navigateTo({
					url:'/pageA/notice_details?id=' + item.id
				})
			},
			getlist(){
				this.$api.messages({
					page:this.page,
					limit:this.limit,
				},true).then(res=>{
					this.news = [...this.news,...res.list]
					for (let i = 0; i < res.list.length; i++) {
						this.news[i].cover = this.$base +res.list[i].cover
					}
					console.log(this.news);
				})
			}
		},
		onReachBottom() {
			this.page ++
			this.getlist()
		},
		onLoad() {
			this.getlist()
		}
	}
</script>

<style lang="scss">
.notice{
	padding: 20rpx 37rpx 0 37rpx;
}
.notice_list{
	width: 676rpx;
	height: 490rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	margin-bottom: 10rpx;
	.title{
		padding: 35rpx 18rpx 7rpx 27rpx;
		.xt{
			font-weight: bold;
			font-size: 32rpx;
			color: #333;
		}
		.time{
			font-size: 26rpx;
			color: #A7A6A9;
		}
	}
	.img{
		width: 632rpx;
		height: 206rpx;
		background: #F9F9F9;
		border-radius: 10px ;
		margin: auto;
		margin-top: 19rpx;
		image{
			width: 100%;height: 100%;
			border-radius: 10rpx;
		}
	}
	.text{
		width: 618rpx;
		height: 42rpx;
		font-size: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #919AA5;
		line-height: 36rpx;
		margin: auto;
		margin-top: 22rpx;
		margin-bottom: 34rpx;
	}
	.foot{
		height: 76rpx;
		padding: 0 22rpx  0  26rpx;
		color: #4B4B4B;
		font-size: 26rpx;
	}
}
</style>
